<!-- 流程审批列表 -->
<template>
  <div v-if="doneViewPageShow">
    <component :is="doneViewPage" :doneViewObject="doneViewObjectClone" @close="close"></component>
  </div>
  <div v-else>
    <div>
      <el-table v-loading="loading" :data="historyList" border size="mini">
        <el-table-column label="任务流水号" prop="taskId" align="center" min-width="100px" />
        <el-table-column label="审批节点" prop="taskName" align="center" />
        <el-table-column label="处理人" prop="approver.userName" align="center" width="160" />
        <el-table-column label="审批结果" prop="isApprove" align="center" width="160">
          <template #default="scope">
            <el-tag v-if="scope.row.isApprove != null" :type="scope.row.isApprove==='true'?'success':'danger'">
              {{ selectDictLabel(wfStatusOptions, scope.row.isApprove) }}
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="审批意见" prop="approveComment" align="center" />
        <el-table-column label="发起时间" prop="processCreateTime" align="center" width="160" />
        <el-table-column label="提交时间" prop="taskCreateTime" align="center" width="160" />
        <el-table-column label="处理时间" prop="taskCompleteTime" align="center" width="160" />
      </el-table>
    </div>
    <div class="empty"></div>
    <component v-if="doneViewIframeShow" :is="doneViewIframePage" :doneViewObject="doneViewObjectClone" @close="close">
    </component>
  </div>

</template>

<script>
import { getApproveHistory } from "./api";

export default {
  name: "WfApproveHistory",
  props: {
    // 流程实例ID
    processInstanceId: {
      required: true,
      type: String,
    },
    //流程状态
    wfStatusOptions: {
      required: true,
      type: Array,
    },
    doneViewObject: {
      type: Object,
      require: false,
      default: () => {},
    },
  },
  data() {
    return {
      //遮罩层
      loading: false,
      // 审批列表
      historyList: [],
      // 整个已办页面
      doneViewPage: {},
      // 显示整个已办页面
      doneViewPageShow: false,
      // 已办内嵌页面
      doneViewIframePage: {},
      // 已办嵌入页面是否加载
      doneViewIframeShow: true,
      doneViewObjectClone: null // doneViewObject对象的拷贝
    }
  },
  watch: {
    // 流程实例ID变化且存在则重新获取列表
    processInstanceId(newVal, oldVal) {
      // this.processInstanceId = newVal;
      if (newVal) {
        if (newVal != oldVal) {
          this.doGetApproveHistory();
        }
      } else {
        this.loading = false;
        this.historyList = [];
      }
    },
    // 绑定父页面已办对象的改变
    doneViewObject: {
      handler(newVal, oldVal) {
        // 重新初始化
        this.doneViewObjectClone = newVal
        this.updateDataFromProp();
      },
      immediate:true
    }
  },
  created() {
    //初始化显示图片
    if (this.processInstanceId) {
      this.doGetApproveHistory();
    }
    //初始化数据
    this.initData();
    this.updateDataFromProp();
  },
  methods: {
    // 获取审批列表
    doGetApproveHistory() {
      this.loading = true;
      getApproveHistory(this.processInstanceId).then(
        response => {
          this.loading = false;
          this.historyList = response.data.list;
        })
    },
    // 初始化数据
    initData() {
      // 整个已办页面
      this.doneViewPage = {};
      // 显示整个已办页面
      this.doneViewPageShow = false;
      // 已办内嵌页面
      this.doneViewIframePage = {};
      // 已办嵌入页面是否加载
      this.doneViewIframeShow = true;
    },
    // 从属性中更新数据
    async updateDataFromProp() {
      // 存在输入参数
      if (this.doneViewObjectClone != null) {
        // 整个已办页面
        const doneViewUrl = this.doneViewObjectClone.doneViewUrl;
        // 通用已办页面的内嵌Iframe
        const doneViewFrameUrl = this.doneViewObjectClone.doneViewFrameUrl;

        // 是否显示整个审批页面
        this.doneViewPageShow = (doneViewUrl != null && doneViewUrl.length > 0);
        if (this.doneViewPageShow) {
          // 存在审批页面配置，接管整个审批页面
          // 路径由anvil-code-low-common开头则由低代码渲染页面接管,格式为'/anvil-code-low-common/views/page/filling/flowFilling/:pageId'
          if (doneViewUrl.startsWith('/anvil-code-low-common')) {
            const pageIdIndex = doneViewUrl.lastIndexOf('/');
            const pageId = doneViewUrl.substring(pageIdIndex + 1);
            const done = doneViewUrl.substring(0, pageIdIndex);
            this.doneViewObjectClone.pageId = pageId;
            const module = await import(`/@/platform/code/components${done}.vue`)
            this.doneViewPage = module.default
          }else{
            const module = await import(`/@/views${doneViewUrl}.vue`)
            this.doneViewPage = module.default
          }
        } else {
          // 是否显示Iframe内嵌页面配置
          this.doneViewIframeShow = (doneViewFrameUrl != null && doneViewFrameUrl.length > 0)
          if (this.doneViewIframeShow) {
            // 路径由anvil-code-low-common开头则由低代码渲染页面接管,格式为'/anvil-code-low-common/views/page/filling/flowFilling/:pageId'
            if (doneViewFrameUrl.startsWith('/anvil-code-low-common')) {
              const pageIdIndex = doneViewFrameUrl.lastIndexOf('/');
              const pageId = doneViewFrameUrl.substring(pageIdIndex + 1);
              const done = doneViewFrameUrl.substring(0, pageIdIndex);
              this.doneViewObjectClone.pageId = pageId;
              const module = await import(`/@/platform/code/components${done}.vue`)
              this.doneViewIframePage = module.default
            }else{
              const module = await import(`/@/views${doneViewFrameUrl}.vue`)
              this.doneViewIframePage = module.default
            }
          }
        }

      }
    },
    // 关闭
    close(event, params) {
      this.initData();
      this.$emit("close", event, params);
    },
  }
}
</script>

<style lang="scss" scoped>
.empty {
  margin-top: 16px;
}
</style>